<template>
    <div class="mt-4">
        <div class="grid grid-cols-5 gap-y-8 gap-x-20">
            <song-shot-information-cart v-for="(item, index) in listData" :detail="item" img-size="200"
                                        :key="index" @click="getListDetail(item.id)"></song-shot-information-cart>
        </div>
        <div class="flex items-center justify-center m-2">
            <n-button :disabled="isLast" @click="pageClick(-1)">
                上一页
            </n-button>
            <p class="mx-4">当前页数: {{page}}</p>
            <n-button :disabled="isNext" @click="pageClick(1)">
                下一页
            </n-button>
        </div>
    </div>
</template>

<script>
import SongShotInformationCart from "@/components/song/SongShotInformationCart";
import {useNotification, NButton} from 'naive-ui';
import {onMounted, reactive, toRefs, watchEffect} from "vue";
import {getUserPlayList} from "@/network/song/song-list";
import {useRouter} from "vue-router";
export default {
    // 用户创建的歌单
    name: "UserCreateSongList",
    props: {
        id: {
            type: String,
            default: '-1'
        }
    },
    setup(props) {
        const TAG = "UserPlayList.vue";
        const router = useRouter();
        const createPlayListInfo = reactive({
            id: props.id,
            listData: [],
            isLast: true,
            isNext: false,
            page: 1,
            pageLimit: 20
        })
        const init = () => {
            getUserPlayList(createPlayListInfo.id).then(res => {
                createPlayListInfo.listData = res.data.playlist;
                // 无更多数据
                if (!res.data.more) {
                    createPlayListInfo.isNext = true;
                } else {
                    createPlayListInfo.isNext = false;
                }
            })
        }
        const refreshData = () => {
            if (createPlayListInfo.page > 1) {
                // 开启上一页按钮
                createPlayListInfo.isLast = false;
            } else if (createPlayListInfo.page == 1) {
                // 关闭上一页按钮
                createPlayListInfo.isLast = true;
            }
            getUserPlayList(createPlayListInfo.id, 20, (createPlayListInfo.page - 1) * createPlayListInfo.pageLimit).then(res => {
                createPlayListInfo.listData = res.data.playlist;
                // 无更多数据
                if (!res.data.more) {
                    createPlayListInfo.isNext = true;
                } else {
                    createPlayListInfo.isNext = false;
                }
            })
        }
        // 通知组件
        const notification = useNotification();
        // 根据ＩＤ获取歌单详情
        const getListDetail = (id) => {
            if (id === 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return;
            } else {
                router.push({path: '/playlist', query: {id}});
            }
        }
        onMounted(() => {
            init();
            watchEffect(() => {
                createPlayListInfo.id = props.id;
                init();
            })
        })
        // 分页按钮
        const pageClick = (flag) => {
            console.log(flag);
            // 防止页数为0
            if (createPlayListInfo.page - 1 == -1) {
                return;
            }
            if (flag == 1) {
                createPlayListInfo.page += 1;
                refreshData();
            } else {
                createPlayListInfo.page -= 1;
                refreshData();
            }
        }
        return {
            ...toRefs(createPlayListInfo),
            getListDetail,
            pageClick
        }
    },
    components: {
        SongShotInformationCart,
        NButton
    }
}
</script>

<style scoped>

</style>